<template>
    <div>
        <!-- 轮播 -->
        <CarouselComponent :bannerList="banner" :height="'360px'"></CarouselComponent>

        <div class="container">
            <div class="m-main">
                <div class="m-content">
                    <div class="m-tabs">
                        <div class="m-tab" :class="{'on':showTab===0}" @click="ShowTab(0)">首页</div>
                        <div class="m-tab" :class="{'on':showTab===1}" @click="ShowTab(1)">政策一览</div>
                        <div class="m-tab" :class="{'on':showTab===2}" @click="ShowTab(2)">政策检索</div>
                        <div class="m-tab" :class="{'on':showTab===3}" @click="ShowTab(3)">图解政策</div>
                    </div>
                    <!-- 首页 -->
                    <div class="tab-content"  v-show="showTab===0">
                        <!-- 最新政策与政策搜索 -->
                        <el-row>
                            <el-col :span="12">
                                <!-- 最新政策 -->
                                <div class="grid-content line-right">
                                    <div class="g-title">最新政策</div>
                                    <div class="g-list">
                                        <ul>
                                            <li v-for="(item,index) in newPoliyt" :key="index">
                                                <div class="li-text text-overflow">{{item.text}}</div>
                                                <div class="li-identifier">{{item.identifier}}</div>
                                                <div class="li-time">
                                                    <span><img src="../../../static/images/calendar.png" alt=""></span>
                                                    {{item.time}}
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <!-- 政策搜索 -->
                                <div class="grid-content">
                                    <div class="g-search">
                                        <div class="s-content">
                                            <div class="s-title">政策搜索</div>
                                            <div class="s-search">
                                                <div class="s-input2">
                                                    <searchInput @SearchData="Index_search"></searchInput>
                                                </div>
                                                

                                                <div class="s-buttom">
                                                    <el-button type="primary" round>高级搜索</el-button>
                                                </div>
                                            </div>
                                            <div class="s-title2">> 热门搜索 < </div>
                                            <div class="s-hot">
                                                <ul>
                                                    <li v-for="(item,index) in hotSeach" :key="index">{{item}}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 政策类目 -->
                        <div class="policy-type c-form">
                            <div class="f-title">政策类目</div>
                            <div class="f-list">
                                <ul>
                                    <li v-for="(item,index) in Polity_type" :key="index">{{item.text}}</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 图解政策 -->
                        <div class="c-form polity-resolv">
                            <div class="f-title">图解政策</div>
                            <div class="f-list">
                                <ul>
                                    <li v-for="(item,index) in Polity_resolve" :key="index">
                                        <div class="l-text">{{item.text}}</div>
                                        <div class="l-img">
                                            <img :src="item.img" alt="">
                                        </div>
                                        <div class="l-bottom">
                                            <span class="">
                                                <span><img src="../../../static/images/eye.png" alt=""></span>
                                                <span>{{item.watch}}次阅读</span>
                                            </span>
                                            <span>
                                                <span><img src="../../../static/images/calendar.png" alt=""></span>
                                                <span>{{item.time}}</span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 政策一览 -->
                    <div class="tab-content"  v-show="showTab===1">
                        <div class="polityRead">
                            <el-row>
                                <el-col :span="5">
                                    <div class="read-left">
                                        <ul>
                                            <li v-for="(item,index) in polity_read" :key="index" :class="{'on':polity_read_state===index}" @click="polity_left(index,item)">
                                                {{item}} <span></span>
                                            </li>
                                        </ul>
                                    </div>
                                </el-col>
                                <el-col :span="19">
                                    <div class="read-right" v-show="polity_read_stateRight">
                                        <div class="r-top">第一部分 财政引导政策</div>
                                        <div class="r-list">
                                            <div class="l-title">各级引导政策</div>
                                            <ul>
                                                <li class="text-overflow" v-for="(item,index) in polity_lead" :key="index" @click="polity_right(item)">{{item}}</li>
                                            </ul>
                                        </div>
                                        <div class="r-list">
                                            <div class="l-title">国家级专项资金</div>
                                            <ul>
                                                <li class="text-overflow" v-for="(item,index) in country_capital" :key="index" @click="polity_right(item)">{{item}}</li>
                                            </ul>
                                        </div>
                                        <div class="r-list">
                                            <div class="l-title">厦门市专项资金</div>
                                            <ul>
                                                <li class="text-overflow" v-for="(item,index) in XiaMen_capital" :key="index" @click="polity_right(item)">{{item}}</li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="read-right-next" v-show="!polity_read_stateRight">
                                        <div class="n-head">
                                            <span><img src="../../../static/images/placeBlue.png" alt=""></span>
                                            <!-- 财政引导政策 > 国家级 -->
                                            {{PolityRead_right_head}}
                                        </div>
                                        <div class="n-content">
                                            <div class="con-tit">国家级</div>
                                            <div class="con-list">
                                                <ul>
                                                    <li v-for="(item,index) in PolityRead_right_date" :key="index">
                                                        <div class="text text-overflow">{{item.text}}</div>     
                                                        <div class="time">{{item.time}}</div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 政策检索 -->
                    <div class="tab-content"  v-show="showTab===2">
                        <div class="polity-search" v-show="PolitySearch">
                            <div class="s-content">
                                <div class="c-top">
                                    <div class="t-input">
                                        <searchInput @SearchData="SearchPolity"></searchInput>
                                    </div>
                                    <!-- <div class="t-button">
                                        <span><img src="../../../static/images/high_search.png" alt=""></span>
                                        高级检索
                                    </div> -->
                                </div>
                                <div class="c-list">
                                    <ul>
                                        <li v-for="(item,index) in Heigh_search" :key="index">{{item}}</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="news-polity">
                                <div class="news-title">
                                    <span><img src="../../../static/images/new_polity.png" alt=""></span>
                                    最新政策
                                </div>
                                <div class="news-list">
                                    <ul>
                                        <li v-for="(item,index) in news_polity" :key="index">
                                            <span class="icon"></span>
                                            <div class="text text-overflow">{{item.text}}</div>
                                            <span class="edition">{{item.edition}}</span>
                                            <span class="time">{{item.time}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="polity-search" v-show="!PolitySearch">
                            <div class="s-content wid80">
                                <div class="c-top">
                                    <div class="t-input w63">
                                        <searchInput @SearchData="SearchPolity"></searchInput>
                                    </div>
                                </div>
                                <div class="c-tip">
                                    我们已为您找到 <span>2条</span>  结果
                                </div>
                                <div class="c-item" v-for="(item,index) in PolitySearch_result" :key="index">
                                    <div class="item-title">{{item.title}}</div>
                                    <div class="item-detal">
                                        <div class="d-line">
                                            <div class="l-left">阅读次数：{{item.read}}次</div>
                                            <div class="l-right">发布时间：{{item.time}}</div>
                                        </div>
                                        <div class="d-line">
                                            <div class="l-left">支持方式：{{item.reward}}</div>
                                            <div class="l-right">支持产业：{{item.industry}}</div>
                                        </div>
                                        <div class="d-line">
                                            <div class="l-left">发文单位：{{item.company}}</div>
                                        </div>
                                    </div>
                                    <div class="item-bottom">{{item.text}}</div>
                                    <div class="item-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 图解政策 -->
                    <div class="tab-content"  v-show="showTab===3">
                        
                        <div class="c-form polity-resolv chart-polity">
                            <div class="f-list">
                                <ul>
                                    <li v-for="(item,index) in Polity_resolve" :key="index">
                                        <div class="l-text">{{item.text}}</div>
                                        <div class="l-img">
                                            <img :src="item.img" alt="">
                                        </div>
                                        <div class="l-bottom">
                                            <span class="">
                                                <span><img src="../../../static/images/eye.png" alt=""></span>
                                                <span>{{item.watch}}次阅读</span>
                                            </span>
                                            <span>
                                                <span><img src="../../../static/images/calendar.png" alt=""></span>
                                                <span>{{item.time}}</span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import bannerSlide from '../../views/polityPage/bannerSlide.vue';
import CarouselComponent from '../../views/localPage/CarouselComponent.vue';
import searchInput from '../../views/polityPage/search.vue';
export default {
    data(){
        return{
            banner:['../../../static/images/banner_polityService.png','../../../static/images/banner_polityService.png','../../../static/images/banner_polityService.png'],//传给轮播组件的图片路径,
            showTab:1,//显示第几个tab
            newPoliyt:[// 最新政策
                {
                    text:'光于印发《苏州市高新技术企业培育实施细则实（试运行）...',
                    identifier:'苏园管[2018] 25号',
                    time:'2019-05-07',
                },
                {
                    text:'光于印发《苏州市高新技术企业培育实施细则实（试运行）...',
                    identifier:'苏园管[2018] 25号',
                    time:'2019-05-07',
                },
                {
                    text:'光于印发《苏州市高新技术企业培育实施细则实（试运行）...',
                    identifier:'苏园管[2018] 25号',
                    time:'2019-05-07',
                },
                {
                    text:'光于印发《苏州市高新技术企业培育实施细则实（试运行）...',
                    identifier:'苏园管[2018] 25号',
                    time:'2019-05-07',
                },
                {
                    text:'光于印发《苏州市高新技术企业培育实施细则实（试运行）...',
                    identifier:'苏园管[2018] 25号',
                    time:'2019-05-07',
                },
            ],
            //热门搜索
            hotSeach:['园区科技领军人才','姑苏产业紧缺人才','知识产权','第三版','金鸡湖双百人才','创业投资引导基金','金鸡湖双百人才','第三版','姑苏产业紧缺人才'],

            Polity_type:[//政策类目
                {text:'财政引导政策'},
                {text:'税收优惠政策'},
                {text:'产业扶持政策'},
                {text:'金融扶持政策'},
                {text:'人才激励政策'},
                {text:'知识产权政策'},
                {text:'其他政策'},
                {text:'查看全部'},
            ],
            Polity_resolve:[//图解政策
                {
                    text:'入选者最高可获得30万奖励，一张图了解园区金鸡湖高...',
                    img:'../../../static/images/demo_polity.png',
                    watch:'800',
                    time:'2019-04-07',
                },
                {
                    text:'入选者最高可获得30万奖励，一张图了解园区金鸡湖高...',
                    img:'../../../static/images/demo_polity.png',
                    watch:'800',
                    time:'2019-04-07',
                },
                {
                    text:'入选者最高可获得30万奖励，一张图了解园区金鸡湖高...',
                    img:'../../../static/images/demo_polity.png',
                    watch:'800',
                    time:'2019-04-07',
                },
                {
                    text:'入选者最高可获得30万奖励，一张图了解园区金鸡湖高...',
                    img:'../../../static/images/demo_polity.png',
                    watch:'800',
                    time:'2019-04-07',
                },
            ],
            polity_read:[//政策一览的左边栏
                '全部政策',
                '财政引导政策',
                '税收优惠政策',
                '产业扶持政策',
                '金融扶持政策',
                '人才激励政策',
                '知识产权政策',
                '其他政策',
            ],
            polity_read_state:0,//政策一览的左边栏显示
            polity_read_stateRight:true,//政策一览的右边栏显示
            polity_lead:[//各级政策领导
                '国家级',
                '江苏省级',
                '苏州省级',
                '园区本级',
            ],
            country_capital:[//国家级资金
                '科技支撑计划',
                '科技型中小企业技术创新基金',
                '点发基金',
                '火炬计划',
                '星火计划',
                '高技术产业发展项目',
                '工程技术研发中心',
                '企业技术中心',
                '国家重点新产业',
                '创业投资引导基金',
            ],
            XiaMen_capital:[//厦门专项资金
                '科技支撑计划',
                '科技型中小企业技术创新基金',
                '点发基金',
                '火炬计划',
                '星火计划',
                '高技术产业发展项目',
                '工程技术研发中心',
                '企业技术中心',
                '国家重点新产业',
                '创业投资引导基金',
            ],
            Heigh_search:[//政策检索  高级检索
                '园区科技领军人才',
                '园区科技领军人才',
                '生物医药产业',
                '第三版',
                '金鸡湖双百人才',
                '上市',
                '金鸡湖双百人才',
            ],
            news_polity:[//政策检索 > 最新政策
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                {
                    text:'关于印发《苏州市高新技术企业培育实施细则新技术...》',
                    edition:'苏科规[2018] 2号',
                    time:'2018-08-03 09:58',
                },
                
            ],
            PolitySearch:true,//政策检索  位点击搜索时显示的页面
            PolitySearch_result:[
                {
                    title:'苏州市级,苏州市姑苏重点产业紧缺人才计划实施细则（试行）',
                    read:'9000',
                    time:'2018-12-11',
                    reward:'奖励',
                    industry:'所有产业',
                    company:'',
                    text:'苏办发[2011] 10号 为加快集聚紧缺高层次人才，助推创新型城市建设和新兴产业发展',
                    img:'../../../static/images/demo_com.png',
                },
                {
                    title:'苏州市级,苏州市姑苏重点产业紧缺人才计划实施细则（试行）',
                    read:'9000',
                    time:'2018-12-11',
                    reward:'奖励',
                    industry:'所有产业',
                    company:'',
                    text:'苏办发[2011] 10号 为加快集聚紧缺高层次人才，助推创新型城市建设和新兴产业发展',
                    img:'../../../static/images/demo_com2.png',
                },
            ],
            // PolityRead_right_state:false,//政策一览  右边显示改变
            PolityRead_right_date:[//政策一览   右边显示 财政引导政策 > 国家级
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
                {
                    text:'关于影视等出口服务适用增值税零税率政策的通知',
                    time:'2018-09-24 15:30',
                },
            ],
            PolityRead_right_head:'全部政策',////政策一览  顶部点击的路径文字
        }

    },
    methods:{
        ShowTab(tab){
            this.showTab=tab;
        },
        polity_left(index,item){//点击政策一览表左边栏
            this.polity_read_state=index;
            this.polity_read_stateRight=true;
            this.PolityRead_right_head = item;
        },
        polity_right(data){
            this.PolityRead_right_head = this.PolityRead_right_head+' > '+data;
            this.polity_read_stateRight=false;
        },
        SearchPolity(data){//政策检索 点击搜索
            this.PolitySearch=false;
            console.log(data);
        },
        Index_search(data){// 首页政策搜索
            console.log(data);
        }
    },
    components:{
        bannerSlide,
        searchInput,
        CarouselComponent
    }
}
</script>
<style lang="less" scoped>
    .m-main{
        background: #F3F3F3;
        padding: 80px 20px 300px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        .m-content{
            .m-tabs{
                display: flex;
                border-bottom: 1px #ebeef5 solid;
                z-index: 2;
                background: #fff;
                .m-tab{
                    flex: 1;
                    text-align: center;
                    height: 80px;
                    line-height: 80px;
                    position: relative;
                    color: #1575F9;
                    font-size: 24px;
                    &:hover{
                        cursor:pointer;
                    }
                    &.on{
                        // background: #1575F9;
                        background:linear-gradient(rgb(150, 176, 212),#1575F9);
                        color: #fff;
                        &:after{
                            width: 0;
                        }
                    }
                    &:after{
                        content: '';
                        position: absolute;
                        right: 0;
                        width:1px;
                        height:60px;
                        top: 10px;
                        background:linear-gradient(0deg,rgba(21,117,249,0) 0%,rgba(21,117,249,1) 50%,rgba(21,117,249,0) 100%);
                    }
                    &:last-child{
                        &:after{
                            width: 0;
                        }
                    }
                }
            }
            .tab-content{
                .el-row{
                    background: #fff;
                    padding: 30px 20px 100px;
                }
                .grid-content{
                    margin-top: 30px;

                    &.line-right{
                        position: relative;
                        &::after{
                            content: '';
                            height: 80%;
                            position: absolute;
                            top: 10%;
                            width: 2px;
                            background: #888;
                            right: 0;
                        }

                    }
                    .g-title{
                        font-size:24px;
                        font-family:MicrosoftYaHei-Bold;
                        font-weight:bold;
                        color: #333333;
                        padding-left: 30px;
                        position: relative;
                        &::before{
                            content: '';
                            position: absolute;
                            left: 0;
                            width: 8px;
                            height: 40px;
                            background: #1575F9;
                        }
                    }
                    .g-list{
                        &>ul{
                            li{
                                position: relative;
                                margin-top: 20px;
                                padding: 0 32px;
                                font-weight:400;
                                font-family:MicrosoftYaHei;
                                &::before{
                                    content: '';
                                    position: absolute;
                                    width: 6px;
                                    height: 6px;
                                    background: #1575F9;
                                    transform:rotate(45deg);
                                    left: 6px;
                                    top: 11px;
                                }
                                .li-text{
                                    font-size:18px;
                                    color: #666;
                                    margin-bottom: 5px;
                                }
                                .li-identifier,.li-time{
                                    font-size: 14px;
                                    color: #999;
                                }
                                .li-identifier{
                                    display: inline-block;
                                }
                                .li-time{
                                    float: right;
                                    &>span{
                                        height: 14px;
                                        vertical-align: text-bottom;
                                        img{
                                            height: 100%;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .g-search{

                        padding: 0 20px 0 30px;
                        .s-content{
                            background: #FAFAFA;
                            padding: 30px 10px;
                            .s-title{
                                font-size:24px;
                                text-align: center;
                                color: #1575F9;
                            }
                            .s-search{
                                margin-top: 20px;
                                .s-input2{
                                    width: 70%;
                                    display: inline-block;
                                    height: 50px;
                                }
                                .s-buttom{
                                    float: right;
                                    margin-top: 5px;
                                }
                            }
                            .s-title2{
                                text-align: center;
                                color: #1575F9;
                                font-size: 20px;
                                margin-top: 30px;
                            }
                            .s-hot{
                                &>ul{
                                    margin-top: 30px;
                                    li{
                                        display: inline-block;
                                        padding: 2px 10px;
                                        border-radius: 20px;
                                        border:1px solid rgba(153,153,153,1);
                                        font-size: 16px;
                                        color: #999;
                                        margin: 6px;
                                        &:hover{
                                            background: #1575F9;
                                            color: #fff;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .c-form{
                    padding: 25px 0;
                    .f-title{
                        color: #333333;
                        font-size: 24px;
                        padding-left: 30px;
                        position: relative;
                        &::before{
                            content: '';
                            position: absolute;
                            left: 0;
                            height: 40px;
                            width: 8px;
                            background: #1575F9;
                            top: 0px;
                        }
                    }
                    .f-list{
                        margin-top: 5px;
                        &>ul{
                            li{
                                display: inline-block;
                                margin-left: 1.5%;
                                width: 23%;
                                text-align: center;
                            }
                        }
                    }
                }
                .policy-type{
                    background: url(../../../static/images/bg_polity.png) no-repeat;
                    background-size: cover;
                    .f-list{
                        &>ul{
                            li{
                                background: #F2F2F2;
                                height: 60px;
                                line-height: 60px;
                                font-size: 20px;
                                margin-top: 25px;
                            }
                        }
                    }
                }
                .polity-resolv{
                    margin-top: 80px;
                    .f-list{
                        margin-top: 30px;
                        &>ul{
                            li{
                                background: #fff;
                                padding: 20px 0 15px;
                                .l-text{
                                    text-overflow: -o-ellipsis-lastline;//两行超出隐藏
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    width: 90%;
                                    margin: 0 auto;
                                    font-size: 18px;
                                    font-family:MicrosoftYaHei;
                                    font-weight:400;
                                }
                                .l-img{
                                    margin-top: 15px;
                                    img{
                                        width: 100%;
                                    }
                                }
                                .l-bottom{
                                    font-size:14px;
                                    color: #999999;
                                    font-family:MicrosoftYaHei;
                                    font-weight:400;
                                    width: 90%;
                                    margin: 15px auto 0;
                                    &>span{
                                        &:first-child{
                                            float: left;
                                        }
                                        &:last-child{
                                            float: right;
                                        }
                                    }
                                }

                            }
                        }
                    }
                }

                // 政策一览
                .polityRead{
                    margin-top: 50px;
                    .el-row{
                        padding: 0;
                        .read-left{
                            background: url(../../../static/images/left_bg.png);
                            padding: 100px 0;
                            &>ul{
                                li{
                                    color: #fff;
                                    padding-left: 15%;
                                    font-size: 20px;
                                    height: 64px;
                                    line-height: 64px;
                                    position: relative;
                                    &>span{
                                        position: absolute;
                                        width: 15px;
                                        height: 15px;
                                        border-right: 2px solid #fff;
                                        border-top:2px solid #fff;
                                        transform:rotate(45deg);
                                        top: 37%;
                                        right: 20%;
                                    }
                                    &.on{
                                        background: #fff;
                                        color: #1575F9;
                                        &::before{
                                            content: '';
                                            width: 8px;
                                            height: 64px;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            background: #1575F9;
                                        }
                                        &>span{
                                            border-right: 2px solid #1575F9;
                                            border-top:2px solid #1575F9;
                                            right: 25%;
                                        }
                                    }
                                }
                            }
                        }
                        .read-right{
                            padding: 20px;
                            .r-top{
                                background: #F5F5F5;
                                font-size: 16px;
                                padding: 10px 0 10px 20px;
                                color: #666666;
                                position:relative;
                                &::after{
                                    content: '';
                                    position: absolute;
                                    width:0;
                                    height:0;
                                    border-right:15px solid transparent;
                                    border-left:15px solid transparent;
                                    border-top:15px solid #F5F5F5;
                                    top: 100%;
                                    left: 7%;
                                }
                            }
                            .r-list{
                                padding: 44px 30px;
                                border-bottom: 1px dashed #E0E0E0;
                                &:last-child{
                                    border: none;
                                }
                                .l-title{
                                    color: #1575F9;
                                    font-size: 20px;
                                    margin-bottom: 20px;
                                }
                                &>ul{
                                    li{
                                        display: inline-block;
                                        width: 25%;
                                        font-size: 16px;
                                        color: #666;
                                    }
                                }
                            }
                        }
                        .read-right-next{
                            padding: 0 20px;
                            .n-head{
                                height: 50px;
                                line-height: 50px;
                                font-size: 14px;
                                border-bottom: 1px solid #E0E0E0;
                                color: #999;
                                &>span{
                                    margin-right: 10px;
                                    display: inline-block;
                                    width: 17px;
                                    img{
                                        width: 100%;
                                    }
                                }
                            }
                            .n-content{
                                padding: 50px 70px 0;
                                .con-tit{
                                    text-align: center;
                                    font-size: 20px;
                                    color: #167DF9;
                                }
                                .con-list{
                                    margin-top: 30px;
                                    &>ul{
                                        li{
                                            margin-top: 10px;
                                            .text{
                                                font-size: 16px;
                                                color: #666;
                                                width: 80%;
                                                display: inline-block;

                                            }
                                            .time{
                                                float: right;
                                                font-size: 14px;
                                                color: #999;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                }

                //政策检索
                .polity-search{
                    background: #fff;
                    padding: 50px 10px;
                    .s-content{
                        width: 65%;
                        margin: 0 auto;
                        padding-bottom: 60px;
                        &.wid80{
                            width: 80%;
                            .c-top{
                                text-align: center;
                            }
                        }
                        .c-top{
                            .t-input{
                                width: 65%;
                                display: inline-block;

                                height: 60px;
                                &w63{
                                    width: 63%;
                                    margin: 0 auto;
                                }
                                &>span{
                                    position: absolute;
                                    top: 0;
                                    right: 5%;
                                    height: 38px;
                                    top: 11px;
                                    &:hover{
                                        cursor:pointer;
                                    }
                                    img{
                                        height: 100%;
                                    }
                                }
                            }
                            .t-button{
                                float: right;
                                width: 30%;
                                height: 58px;
                                background: #177EF9;
                                border-radius: 50px;
                                line-height: 58px;
                                text-align: center;
                                font-size: 20px;
                                color: #fff;
                                &>span{
                                    
                                    img{
                                        height: 30px;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }
                        .c-list{
                            width: 65%;
                            &>ul{
                                padding:20px 4px;
                                li{
                                    height: 36px;
                                    line-height: 36px;
                                    padding: 0 15px;
                                    border-radius: 40px;
                                    border:1px solid #999999;
                                    display: inline-block;
                                    font-size: 14px;
                                    color: #999;
                                    margin: 5px;
                                }
                            }
                        }
                        .c-tip{
                            background: #E6E6E6;
                            height: 50px;
                            line-height: 50px;
                            padding: 0 20px;
                            color: #999999;
                            border-radius:4px;
                            margin-top: 40px;
                            span{
                                color: #177EF9;
                            }
                        }
                        .c-item{
                            padding: 40px 0 40px 30px;
                            width: 90%;
                            border:1px solid #999;
                            margin-top: 30px;
                            position: relative;
                            .item-title{
                                font-size:18px;
                                color: #177EF9;
                            }
                            .item-detal{
                                width: 70%;
                                .d-line{
                                    font-size: 14px;
                                    color:#999;
                                    margin-top: 10px;
                                    .l-left{
                                        display: inline-block;
                                    }
                                    .l-right{
                                        float: right;
                                    }
                                }
                            }
                            .item-bottom{
                                font-size: 14px;
                                color: #333;
                                margin-top: 20px;
                            }
                            .item-img{
                                position: absolute;
                                right: -86px;
                                top: 13%;
                                width: 274px;
                                height: 174px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                    .line{
                        width: 100%;
                        height: 1px;
                        background: #E0E0E0;
                        margin-top: 10px;
                    }
                    .news-polity{
                        padding: 80px 10px 50px;
                        .news-title{
                            color: #333;
                            font-weight:bold;
                            font-size: 24px;
                            border-bottom: 4px solid #1987F9;
                            height: 50px;
                            &>span{
                                margin-right: 10px;
                            }
                        }
                        .news-list{
                            &>ul{
                                margin-top: 30px;
                                li{
                                    padding: 0 10px 0 30px;
                                    height: 25px;
                                    line-height: 25px;
                                    position: relative;
                                    margin-top: 18px;
                                    .icon{
                                        position: absolute;
                                        left: 0;
                                        top: 45%;
                                        width: 4px;
                                        height: 4px;
                                        background: #1575F9;
                                        transform:rotate(45deg);
                                    }
                                    .text{
                                        width: 50%;
                                        color: #333;
                                        font-size: 20px;
                                        display: inline-block;
                                        vertical-align: bottom;
                                    }
                                    .edition,.time{
                                        color: #999;
                                        font-size: 16px;
                                    }
                                    .time{
                                        float: right;

                                    }
                                }
                            }
                        }
                    }
                }
                .chart-polity{
                    margin-top: 0;
                    .f-list{
                        &>ul{
                            li{
                                margin-left: 2.6%;
                                &:first-child{
                                    margin-left: 0;
                                }
                            }
                        }
                    }
                }
            }
        }

    }

</style>
